import {Component} from "react";
import {connect} from 'react-redux'
import './css/homeIndex.scss'
import {add, subtract} from "../../redux/modules/countInfo/action";
import {store} from '@/redux/index'
import ChildIndex from "./component/ChildIndex";
import welcome from '@/assets/images/welcome.png'
import {countInfo} from "../../redux/modules/countInfo/reducer";

class HomeIndex extends Component{
    state={
        randNum: 0
    }
    subtract = () => {
        let { num } = store.getState().countInfo;
        countInfo.num = num-1;
        this.props.subtract(countInfo);
    }

    add = () => {
        let { num } = store.getState().countInfo;
        countInfo.num = num+1
        this.props.add(countInfo);
    }

    getMsg = (v) => {
        console.log(v, '得到子组件信息--8')
        this.setState({
            randNum: v
        })
    }

    render() {
        let {num} = store.getState().countInfo;
        let {randNum} = this.state;
        return (
            <div className='homeBox'>
                <h1>首页</h1>
                <div className='flex'>
                    <p onClick={this.subtract}>-</p>
                    <p>{num}</p>
                    <p onClick={this.add}>+</p>
                </div>
                <ChildIndex msg={this.getMsg} />
                <p>这是接收的子组件信息：{randNum}</p>
                <img src={welcome} alt="欢迎"/>
            </div>
        )
    }
}
const mapStateToProps =(state) => {
    let {countInfo} = state
    return countInfo;
}
const mapDispatchToProps = dispatch => {
    return{
        add: obj => dispatch(add(obj)),
        subtract: obj => dispatch(subtract(obj))
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(HomeIndex);